<script setup>
	import {
		ref
	} from 'vue';
	const isShow = ref(false);
	const isFixed = ref(false);
	const isCollapse = ref(true);

	const toggleFixed = () => {
		isFixed.value = !isFixed.value;
		if (isFixed.value) {
			isCollapse.value = false;
		}
	};
	const leaveCollapse = () => {
		if (!isFixed.value) {
			isCollapse.value = true;
		}
	};
	const toggleCollapse = () => {
		if (!isFixed.value) {
			isCollapse.value = !isCollapse.value;
		}
	};
</script>
<template>
	<div :class="['side-wrapper', { 'fixed-style': isFixed }]">
		<div class="side-panel" @mouseleave="leaveCollapse">
			<img src="@/assets/images/ding.png" class="dingIcon" v-if="!isCollapse" @click="toggleFixed">
			<div class="side-navbar">
				<div class="side-navbar-title">
					<img v-if="isCollapse" src="@/assets/images/menu-toggle.png" class="menuIcon" alt=""
						@mouseenter="toggleCollapse">
					<span v-else>管理中心</span>
				</div>
				<el-menu :default-active="$route.path" router :collapse="isCollapse" :unique-opened="true">
					<el-menu-item index="1-1">
						<i class="iconfont icon-kongzhitai"></i><span>控制台</span>
					</el-menu-item>
					<el-sub-menu index="2">
						<template #title>
							<i class="iconfont icon-yumingguanli"></i><span>域名管理</span>
						</template>
						<el-menu-item index="/my-domains">我的域名</el-menu-item>
						<el-menu-item index="/template">模板管理</el-menu-item>
						<el-menu-item index="/domain-transfer">域名转移</el-menu-item>
						<el-menu-item index="/domain-push">域名PUSH</el-menu-item>
						<el-menu-item index="/dns-resolution">DNS和解析</el-menu-item>
					</el-sub-menu>
					<el-sub-menu index="3">
						<template #title><i class="iconfont icon-paimai"></i><span>预订竞价</span></template>
						<el-menu-item index="/domain-booking">我的预订</el-menu-item>
						<el-menu-item index="/domain-booking-remind">预订提醒</el-menu-item>
						<el-menu-item index="/domain-bidding">我的竞价</el-menu-item>
					</el-sub-menu>
					<el-sub-menu index="4">
						<template #title><i class="iconfont icon-caiwuguanli"></i><span>财务管理</span></template>
						<el-menu-item index="/account-info">账户信息</el-menu-item>
						<el-menu-item index="/my-order">我的订单</el-menu-item>
						<el-menu-item index="/invoice">发票管理</el-menu-item>
					</el-sub-menu>
					<el-sub-menu index="5">
						<template #title><i class="iconfont icon-yumingguanli"></i><span>域名交易</span></template>
						<el-menu-item index="/domain-seller">我是卖家</el-menu-item>
						<el-menu-item index="/domain-buyer">我是买家</el-menu-item>
						<el-menu-item index="/domain-order">我的委托</el-menu-item>
					</el-sub-menu>
					<el-sub-menu index="6">
						<template #title><i class="iconfont icon-user"></i><span>账户管理</span></template>
						<el-menu-item index="/account">个人资料</el-menu-item>
					</el-sub-menu>
				</el-menu>
			</div>
		</div>
	</div>
</template>

<style scoped>
	.side-menu-toggle {
		background-color: #fff;
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
		z-index: 1001;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.side-panel {
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
		left: 0px;
		background-color: #fff;
		z-index: 1000;
		transition: 0.3s ease-in-out;
	}

	.side-panel ::v-deep .el-menu {
		border-right: 0;
		left: 0;
	}

	.side-wrapper {
		position: fixed;
		min-width: 40px;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 1000;
	}

	.side-wrapper:hover .side-panel {
		left: 0;
	}

	.side-wrapper:hover .side-menu-toggle {
		left: -420px;
	}

	.dingIcon,
	.menuIcon {
		width: 20px;
		margin-left: auto;
		margin-right: auto;
		display: block;
		z-index: 12;
	}

	.menuIcon {
		margin-top: 20px;
	}

	.dingIcon {
		position: absolute;
		top: 20px;
		right: 20px;
		cursor: pointer;
	}

	.side-navbar-title {
		line-height: 56px;
		height: 56px;
		overflow: hidden;
		padding: 0 15px;
		font-size: 16px;
		font-weight: 600;
		color: #333;
	}

	.side-wrapper.fixed-style .side-panel {
		left: 0;
	}

	.side-wrapper.fixed-style .side-menu-toggle {
		left: -420px;
	}

	.side-wrapper.fixed-style .dingIcon {
		transform: rotate(45deg);
	}

	.side-navbar .iconfont {
		font-size: 20px;
		margin-right: 8px;
	}
</style>